.tensorflow-container {
  height: 100vh; // 固定高度为视口高度
  max-height: 100vh; // 最大高度限制
  background: #ffffff;
  padding: 20rpx; // 与Main页面保持一致
  overflow: hidden; // 禁止滚动
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  
  .loading-container,
  .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    
    .loading-text,
    .error-text {
      font-size: 32rpx;
      color: #2c3e50;
      margin-bottom: 40rpx;
      text-align: center;
      background: #f8f9fa;
      padding: 30rpx;
      border-radius: 24rpx;
      box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
      border: 1rpx solid #e9ecef;
    }
    
    .debug-info {
      background: #f8f9fa;
      border-radius: 15rpx;
      padding: 30rpx;
      margin: 30rpx 0;
      border: 1rpx solid #e9ecef;
      
      .debug-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .debug-text {
        font-size: 24rpx;
        color: #7f8c8d;
        margin-bottom: 10rpx;
        display: block;
        word-break: break-all;
      }
    }
    
    .action-buttons {
      display: flex;
      gap: 20rpx;
      margin-top: 30rpx;
    }
    
    .retry-button {
      flex: 1;
      border: none;
      border-radius: 50rpx;
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      
      &.primary {
        background: linear-gradient(90deg, #FF6B6B 0%, #FF8E8E 100%);
        color: #ffffff;
        box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
      }
      
      &.secondary {
        background: #f8f9fa;
        color: #2c3e50;
        border: 1rpx solid #e9ecef;
      }
    }
  }
}

.image-preview-section {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx; // 减少内边距
  margin-bottom: 20rpx; // 减少底部间距
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid #e9ecef;
  flex-shrink: 0; // 防止被压缩
  
  .preview-image {
    width: 100%;
    height: 350rpx; // 减少高度以适应固定视口
    border-radius: 15rpx;
    margin-bottom: 20rpx; // 减少底部间距
    object-fit: contain;
    background: #f8f9fa;
  }
  
  .image-info {
    .image-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 15rpx;
      display: block;
    }
    
    .upload-time,
    .original-name {
      font-size: 24rpx;
      color: #666666;
      margin-bottom: 10rpx;
      display: block;
    }
  }
}

.analysis-section {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx; // 减少内边距
  margin-bottom: 20rpx; // 减少底部间距
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid #e9ecef;
  flex: 1; // 占用剩余空间
  overflow-y: auto; // 允许垂直滚动
  overflow-x: hidden; // 禁止水平滚动
  
  .section-header {
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #2c3e50;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10rpx;
        width: 60rpx;
        height: 6rpx;
        background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
        border-radius: 3rpx;
      }
    }
  }
  
  .analysis-content {
    .analysis-text {
      font-size: 28rpx;
      color: #2c3e50;
      font-weight: 500;
      margin-bottom: 20rpx;
      display: block;
      text-align: center;
    }
    
    .analysis-description {
      font-size: 26rpx;
      color: #7f8c8d;
      line-height: 1.6;
      display: block;
      margin-bottom: 20rpx;
      text-align: center;
    }

    // 分析结果样式
    .analysis-results {
      margin-top: 20rpx;

      .analysis-success {
        font-size: 28rpx;
        color: #28a745;
        font-weight: 600;
        margin-bottom: 20rpx;
        display: block;
        padding: 15rpx;
        background: rgba(40, 167, 69, 0.1);
        border-radius: 10rpx;
        border-left: 4rpx solid #28a745;
      }

      .faces-analysis {
        .face-result {
          background: #f8f9fa;
          border-radius: 15rpx;
          padding: 20rpx;
          margin-bottom: 20rpx;
          border: 1rpx solid #e9ecef;

          .face-title {
            font-size: 30rpx;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15rpx;
            display: block;
            text-align: center;
          }

          .result-section {
            margin-bottom: 15rpx;
            padding: 10rpx 0;

            .section-title {
              font-size: 26rpx;
              font-weight: 600;
              color: #343a40;
              margin-bottom: 10rpx;
              display: block;
              padding-bottom: 5rpx;
              border-bottom: 1rpx solid #dee2e6;
            }

                         .result-item {
               font-size: 24rpx;
               color: #6c757d;
               line-height: 1.5;
               margin-bottom: 8rpx;
               display: block;
               padding-left: 15rpx;
               position: relative;
               
               &.detail {
                 font-size: 22rpx;
                 color: #adb5bd;
                 margin-left: 20rpx;
                 font-style: italic;
               }

               &::before {
                 content: "•";
                 position: absolute;
                 left: 0;
                 color: #FF6B6B;
                 font-weight: bold;
               }
               

             }

             // 表情详细分析样式
             .expression-scores {
               margin-top: 10rpx;
               padding: 10rpx;
               background: rgba(255, 107, 107, 0.05);
               border-radius: 8rpx;
               border-left: 3rpx solid #FF6B6B;

               .scores-title {
                 font-size: 22rpx;
                 color: #495057;
                 font-weight: 600;
                 margin-bottom: 8rpx;
                 display: block;
               }

               .score-item {
                 font-size: 20rpx;
                 color: #6c757d;
                 line-height: 1.4;
                 margin-bottom: 4rpx;
                 display: block;
                 padding-left: 10rpx;
                 position: relative;

                 &::before {
                   content: "▸";
                   position: absolute;
                   left: 0;
                   color: #FF6B6B;
                   font-size: 16rpx;
                 }
               }
             }
           }
         }
       }

      .ai-analysis-section {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 20rpx;
        padding: 0;
        margin-top: 30rpx;
        border: 1rpx solid #e3e6f0;
        box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.08);
        overflow: hidden;
        position: relative;
        
        // 顶部装饰条
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4rpx;
          background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
        }

        .section-title {
          font-size: 32rpx;
          font-weight: 700;
          color: #1e293b;
          margin: 0;
          padding: 24rpx 24rpx 20rpx 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
          border-bottom: 1rpx solid #e2e8f0;
          position: relative;
          
          // 图标样式
          &::before {
            content: '🤖';
            margin-right: 12rpx;
            font-size: 28rpx;
          }
          
          // 渐变文字效果
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }

        .ai-analysis-text {
          font-size: 28rpx;
          color: #374151;
          line-height: 1.8;
          text-align: justify;
          padding: 24rpx;
          margin: 0;
          position: relative;
          
          // 改善段落样式
          p, div {
            margin-bottom: 16rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
          
          // 强调文字样式
          strong, b {
            color: #1e293b;
            font-weight: 600;
          }
          
          // 数字高亮
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 24rpx;
            right: 24rpx;
            height: 1rpx;
            background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
          }
          
          // 添加专业的排版效果
          text-indent: 0;
          letter-spacing: 0.5rpx;
          word-spacing: 2rpx;
          
          // 突出关键词样式
          .highlight {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            padding: 2rpx 8rpx;
            border-radius: 6rpx;
            color: #6366f1;
            font-weight: 500;
          }
        }
        
        // 悬浮效果（如果支持）
        &:hover {
          transform: translateY(-2rpx);
          box-shadow: 0 12rpx 40rpx rgba(99, 102, 241, 0.12);
          transition: all 0.3s ease;
        }
        
        // 入场动画
        animation: fadeInUp 0.6s ease-out;
        
        // 加载动画效果
        &.loading {
          .ai-analysis-text {
            animation: pulse 1.5s ease-in-out infinite;
          }
          
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: shimmer 1.5s infinite;
          }
        }
      }
    }
  }
}

.action-section {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx; // 减少顶部间距
  flex-shrink: 0; // 防止被压缩
  
  .action-button {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: 600;
    border: none;
    
    &.primary {
      background: linear-gradient(90deg, #FF6B6B 0%, #FF8E8E 100%);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
    }
    
    &.secondary {
      background: #f8f9fa;
      color: #2c3e50;
      border: 1rpx solid #e9ecef;
      box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
    }
  }
}

/* 动画效果 */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .tensorflow-container {
    padding: 20rpx 15rpx;
  }
  
  .image-preview-section,
  .analysis-section {
    padding: 20rpx;
  }
  
  .preview-image {
    height: 300rpx; // 进一步减少高度
  }
  
  .action-button {
    height: 80rpx;
    font-size: 28rpx;
  }
  
  // AI分析区域响应式优化
  .ai-analysis-section {
    margin-top: 20rpx;
    border-radius: 15rpx;
    
    .section-title {
      font-size: 28rpx;
      padding: 20rpx 20rpx 16rpx 20rpx;
      
      &::before {
        font-size: 24rpx;
        margin-right: 8rpx;
      }
    }
    
    .ai-analysis-text {
      font-size: 26rpx;
      line-height: 1.7;
      padding: 20rpx;
      letter-spacing: 0.3rpx;
      
      p, div {
        margin-bottom: 12rpx;
      }
      
      .highlight {
        padding: 1rpx 6rpx;
        border-radius: 4rpx;
      }
    }
  }
}



.loading-text {
  animation: pulse 1.5s ease-in-out infinite;
}

/* 错误状态样式 */
.error-container {
  .error-text {
    color: #ff6b6b;
    background: rgba(255, 255, 255, 0.9);
    padding: 30rpx;
    border-radius: 15rpx;
    margin-bottom: 30rpx;
  }
}

/* 全屏图片分析模式 */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.show {
    opacity: 1;
    transform: scale(1);
  }
}

.fullscreen-image-container {
  position: relative;
  width: 90vw;
  height: 80vh;
  max-width: 600rpx;
  max-height: 800rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.fullscreen-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* 人脸扫描动画效果 */
.face-scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* 扫描线动画 */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #00ff88 20%, 
    #00ff88 80%, 
    transparent 100%);
  box-shadow: 0 0 20rpx #00ff88;
  animation: scanLine 2s ease-in-out infinite;
}

@keyframes scanLine {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    top: 100%;
    opacity: 1;
  }
}

/* 四角扫描框 */
.scan-corners {
  position: absolute;
  top: 20%;
  left: 20%;
  right: 20%;
  bottom: 20%;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #00ff88;
  box-shadow: 0 0 15rpx rgba(0, 255, 136, 0.6);
  animation: cornerPulse 1.5s ease-in-out infinite;
  
  &.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 15rpx;
  }
  
  &.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 15rpx;
  }
  
  &.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 15rpx;
  }
  
  &.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 15rpx;
  }
}

@keyframes cornerPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* 扫描提示文字 */
.scan-text-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.scan-text {
  color: #00ff88;
  font-size: 28rpx;
  font-weight: 600;
  text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5);
  margin-bottom: 20rpx;
  display: block;
  animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5);
  }
  50% {
    text-shadow: 0 0 20rpx rgba(0, 255, 136, 0.8);
  }
}

/* 加载点动画 */
.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #00ff88;
  animation: dotBounce 1.4s ease-in-out infinite both;
  box-shadow: 0 0 8rpx rgba(0, 255, 136, 0.6);
  
  &:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  &:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  &:nth-child(3) {
    animation-delay: 0s;
  }
}

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 黄金比例分析样式 */
.golden-ratio-section {
  background: linear-gradient(135deg, #fff9e6 0%, #fff5cc 100%);
  border: 2rpx solid #f0d000;
  border-radius: 20rpx;
  margin-top: 30rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(240, 208, 0, 0.15);
  
  .section-title {
    font-size: 34rpx !important;
    color: #b8860b !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin-bottom: 25rpx;
    
    &:before {
      content: '';
      width: 6rpx;
      height: 30rpx;
      background: linear-gradient(to bottom, #f0d000, #b8860b);
      border-radius: 3rpx;
    }
  }
}

.golden-ratio-score {
  background: rgba(240, 208, 0, 0.1);
  border-radius: 15rpx;
  padding: 25rpx;
  margin-bottom: 25rpx;
  border: 1rpx solid rgba(240, 208, 0, 0.3);
  text-align: center;
  
  .score-main {
    font-size: 36rpx;
    font-weight: 700;
    color: #b8860b;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .score-grade {
    font-size: 28rpx;
    color: #8b6914;
    font-weight: 600;
    display: block;
  }
}

.golden-ratio-details {
  .details-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #8b6914;
    margin-bottom: 20rpx;
    display: block;
  }
}

.dimension-item {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid rgba(240, 208, 0, 0.2);
  
  .dimension-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8rpx;
    display: block;
  }
  
  .dimension-score {
    font-size: 26rpx;
    font-weight: 600;
    color: #b8860b;
    margin-bottom: 8rpx;
    display: block;
  }
  
  .dimension-detail {
    font-size: 24rpx;
    color: #5d6d7e;
    margin-bottom: 8rpx;
    display: block;
    line-height: 1.4;
  }
  
  .dimension-analysis {
    font-size: 24rpx;
    color: #27ae60;
    font-weight: 500;
    display: block;
  }
}

.golden-ratio-summary {
  margin-top: 25rpx;
  
  .summary-section {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 15rpx;
    border: 1rpx solid rgba(240, 208, 0, 0.2);
    
    .summary-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 12rpx;
      display: block;
    }
    
    .summary-item {
      font-size: 24rpx;
      color: #5d6d7e;
      margin-bottom: 6rpx;
      display: block;
      line-height: 1.5;
      padding-left: 10rpx;
    }
  }
}

/* 响应式调整 */
@media (max-width: 375px) {
  .fullscreen-image-container {
    width: 95vw;
    height: 75vh;
  }
  
  .scan-text {
    font-size: 26rpx;
  }
  
  .corner {
    width: 50rpx;
    height: 50rpx;
  }
  
  .golden-ratio-section {
    padding: 20rpx;
    
    .section-title {
      font-size: 30rpx !important;
    }
    
    .golden-ratio-score {
      padding: 20rpx;
      
      .score-main {
        font-size: 32rpx;
      }
      
      .score-grade {
        font-size: 26rpx;
      }
    }
    
    .dimension-item {
      padding: 15rpx;
      
      .dimension-title {
        font-size: 26rpx;
      }
      
      .dimension-score {
        font-size: 24rpx;
      }
      
      .dimension-detail,
      .dimension-analysis {
        font-size: 22rpx;
      }
    }
  }
}